<template>
  <div>
    <!-- 1.登录头部导航提示 -->
    <van-nav-bar title="商品详情" fixed>
      <template #left>
        <van-icon name="arrow-left" size="18" @click="$router.back()" />
      </template>
    </van-nav-bar>
    <!-- 2.轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="obj in goodsList" :key="obj.id">
        <img class="imgItem" :src="obj.list_pic_url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 3.server -->
    <div class="server">
      <span>30天快速退货</span>
      <span>48小时快速退款</span>
      <span>满88元免邮费</span>
    </div>
    <!-- 4.details -->
    <div class="details" ref="getImg">
      <div class="item" v-for="obj in goodsList" :key="obj.id">
        <img :src="obj.list_pic_url" alt="" />
        <p>{{ obj.name }}</p>
        <span class="details_color"> ${{ obj.retail_price }}</span>
      </div>
    </div>
    <!-- 底部按钮 -->
    <FooterShopCar
      :getId="ItemId"
      @goodsId="DescId = $event"
      :DescId="DescId.id"
    ></FooterShopCar>
  </div>
</template>

<script>
import { getHotGoodsData } from "@/api/homeAPI.js";
import { ImagePreview } from "vant";
import FooterShopCar from "@/views/home/components/Footer";
export default {
  name: "Desc",
  props: {
    ItemId: {
      type: Number,
    },
  },
  data() {
    return {
      parentId: 2,
      DescId: this.$route.query,
      goodsList: [],
    };
  },

  created() {
   

    let id = location.href.split("?")[1]
      ? location.href.split("?")[1].split("=")[1]
      : this.ItemId;
    this.getDetailDataHandler({ id });
  },
  components: {
    FooterShopCar,
  },
  methods: {
    async getDetailDataHandler(obj) {
      try {
        const res = await getHotGoodsData(obj);
        console.log(res);
        this.goodsList = res.data.data.goodsList;
      } catch (err) {
        console.log(err.message);
      }

      // =========必须在宏任务中执行 才可以!
      setTimeout(() => {
        this.VImages();
      }, 0);
    },
    VImages() {
      let imgs = [...this.$refs["getImg"].querySelectorAll("img")];
      let imgSrc = imgs.map((item) => item.src);
      imgs.forEach((item, index) => {
        item.onclick = () => {
          ImagePreview({
            //调用函数;
            images: imgSrc,
            startPosition: index,
          });
        };
      });
    },
  },
};
</script>

<style scoped lang="scss">
// 225, 28, 52
::v-deep .van-nav-bar__content {
  background-color: rgb(225, 28, 52);
}
::v-deep .van-nav-bar__title.van-ellipsis,
::v-deep .van-icon-arrow-left {
  color: #fff;
}

.imgItem {
  width: 100vw;
}
::v-deep .my-swipe {
  background-color: #eee;
}

// server 244, 244, 244

.server {
  height: 50px;
  display: flex;
  background-color: rgb(244, 244, 244);
  justify-content: center;
  align-items: center;
  span {
    flex: 1;
    font-size: 26px;
    color: #666;
    text-align: center;
  }
}

.item {
  text-align: center;
  color: #666;
  font-size: 32px;
  img {
    width: 70%;
  }
}
.details_color {
  color: #c00000;
}
</style>
